{if condition="$attr['selectedTemplate'] != 'custom-rubik-cube'"}
<style>
.rubik-cube{background: #ffffff;}
.rubik-cube ul {overflow: hidden;padding:0;margin: 0;list-style-type: none;}
.rubik-cube ul li {float: left;text-align: center;}
.rubik-cube ul li img{width: auto;height: auto;max-width: 100%;max-height: 100%;}
.rubik-cube ul li.row1-of2{width:50%;}
.rubik-cube ul li.row1-of3{width:33.33%;}
.rubik-cube ul li.row1-of4{width:25%;}
.rubik-cube ul li.row2-lt-of2-rt{width:49.3%;float: none;display: inline-block;}

.rubik-cube ul li.row1-lt-of2-rt{width:50%;}
.rubik-cube ul li.row1-lt-of2-rt:nth-child(1){height:320px;line-height: 320px;}
.rubik-cube ul li.row1-lt-of2-rt:nth-child(2){height:160px;line-height: 160px;}
.rubik-cube ul li.row1-lt-of2-rt:nth-child(3){height:160px;line-height: 160px;}

.rubik-cube ul li.row1-tp-of2-bm{height:130px;line-height: 130px;}
.rubik-cube ul li.row1-tp-of2-bm:nth-child(1){width:100%;}
.rubik-cube ul li.row1-tp-of2-bm:nth-child(2),.rubik-cube ul li.row1-tp-of2-bm:nth-child(3){width:50%;}

.rubik-cube ul li.row1-lt-of1-tp-of2-bm:nth-child(1){height:320px;line-height:320px;width:50%;}
.rubik-cube ul li.row1-lt-of1-tp-of2-bm:nth-child(2){height:160px;line-height:160px;width:50%;}
.rubik-cube ul li.row1-lt-of1-tp-of2-bm:nth-child(3),.rubik-cube ul li.row1-lt-of1-tp-of2-bm:nth-child(4){height:160px;line-height:160px;width:25%;}
</style>
<div class="rubik-cube">
	<ul>
		{foreach name="$attr['list']" item="vo"}
		<li class="{$attr['selectedTemplate']}">
			{if condition="$vo['link']"}
			<a href="{:addon_url($vo['link']['h5_url'])}">
			{else/}
			<a href="javascript:;">
			{/if}
				{if condition="stristr($vo.imageUrl,'static') === false"}
				<img src="{:img($vo.imageUrl)}"/>
				{else/}
				<img src="{:img(__PUBLIC__.'/'.$vo.imageUrl)}"/>
				{/if}
			</a>
		</li>
		{/foreach}
	</ul>
</div>
{else/}
<style>
img{vertical-align: middle;display: inline-block;}
</style>
<div style="position:relative;background:#ffffff;">
	{$attr['diyHtml']}
</div>
{/if}